<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-10 16:26:16
-->
<template>
  <div class="Apply">
    <div class="header">
      <p>
        <img src="../../public/logo2.png" alt="">
        <i><b>Codecat</b></i>
      </p>
    </div>
    <div class="content">
      <div class="left">
        <ul>
          <li><h3><b>账号注册</b></h3></li>
          <li>
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="手机号" prop="mobile">
                <el-input   v-model="ruleForm.mobile" placeholder="请输入11位手机号"  class="inp_normal inpStyle" ></el-input>
              </el-form-item>
              <el-form-item label="设置密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
              </el-form-item>
              <el-form-item >
                <el-button class="resign" type="primary" @click="submitForm('ruleForm')" 
                  ><h9 >立即注册</h9></el-button>
              </el-form-item>
            </el-form>
          </li>
          <li><a>Codecat服务使用协议</a></li>
          <li><a>Codecat个人信息保护政策</a></li>
          <li><a>全国人大常委会关于加强网络信息保护的决定</a></li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>已有账号，<router-link to="Home">直接登录》</router-link></li><hr>
          <li>Codecat注册帮助</li>
          <li>
            <ol>注册Codecat账号的常见问题</ol>
            <ol>手机号在注册Codecat账号时提示已被注册</ol>
            <ol>注册提示频繁怎么办</ol>
            <ol>更多帮助》</ol>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Apply {
  background-color: #a9d4ee;
  height: 1100px;
  .header {
    & > p {
      padding-top: 100px;
      padding-bottom: 50px;
      font-size: 50px;
      text-align: center;
    }
  }
  .content {
    width: 1000px;
    height: 600px;
    margin: auto;
    background-color: white;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    .left {
      flex: 1;
      border-right: 3px solid #dedede;
      padding-right: 200px;
      ul > li > h3{
        padding-top: 5px;
        padding-bottom: 50px;
        padding-left: 30px;
      }
       ul > li:nth-child(2){
         padding-left: 50px;
       }
       ul > li:nth-child(3),li:nth-child(4),li:nth-child(5){
         padding-left: 150px;
         cursor: pointer;
         color: blueviolet;
       }
       ul > li > a{
         color: blueviolet;
       }
       .resign{
         width: 350px;
         background-color: #ffa00a;
       }
      }
    .right {
      flex-basis: 350px;
      padding-top: 100px;
      padding-left: 30px;
      & > ul > li > ol {
        color: blueviolet;
        padding-top: 20px;
        padding-right: 50px;
        font-size: 14px;
      }

    }
  }
}

</style>
<script>
export default {
  data() {
    var checkPhone = (rule,value,callback) => {
            if(!value) {
                return callback(new Error('手机号不能为空'));
            }else{
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            if(reg.test(value)) {
                callback();
            }else{
                return callback(new Error('请输入正确的手机号'));
            }
        }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
        buyerTel: [{validator: checkPhone,required: true, trigger: 'blur'}],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>